//引入gulp包
var guip = require('gulp');
var sass = requier('gulp-sass');
var browserSync = require('browser-sync');//浏览器同步更新插件
var reload = browserSync.reload;

//新建任务,用来编译sass远文件
gulp.task('buildSass',function(){
    //找到sass源文件,写入sass文件的路径
    gulp.src('./src/sass/style.scss');
    //编译sass文件
        .pipe(sass());
    //将编译的文件输出到指定的需要用的css文件中,css文件的路径
        .pipe(gulp.dest('./src/css/'))
    //浏览器自动刷新
        .pipe(reload({stream:true}))
    });
//然后在命令栏执行gulp buildSass，就完成了sass编译成css文件
gulp.task('autoBuild',function(){
    //创建一个静态服务器；
    //server：指定服务器根目录
    browserSync({
        server:'./src'
        })
    //监听文件改变，并执行任务
    //监听sass文件有没有改变，如果改变，执行buildSass任务
    gulp.watch('./src/sass/style.scss',['buildSass'])
    gulp.watch('./src/sass/*.scss',['buildSass'])//所以的文件
    //也可以监听html文件
    //可以用于项目测试
    gulp.watch('./src/index.html').on('change','reload')
    //在命令栏执行gulp autoBuild，

    })
//每次更新都要在命令栏执行gulp （任务名）
